<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
		<div :style="{fontSize:fontSize+'px'}">{{fmsg}}</div>
		<!-- 父组件监听事件 -->
		<!-- <menu-item @enlarge-text="handle"></menu-item> -->
		<!-- 接收值为固定$event -->
		<menu-item @enlarge-text="handle($event)"></menu-item>  
		</div>
		<template id="tmpl">
			<!-- <button @click='$emit("enlarge-text")'>扩大父组件文字字体</button> -->
			<div>
				<button @click='$emit("enlarge-text", 5)'>扩大父组件文字字体</button>
			</div>
		</template>
		<script src="./js/vue-2.5.16.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//注册组件
			//子组件通过$emit自定义事件向父组件传值
			Vue.component("menu-item",{
				template:"#tmpl"
			})
			var vm = new Vue({
				el:"#app",
				data:{
					fmsg:"父组件内容",
					fontSize:10,
				},
				methods:{
					// handle:function(){
					// 	this.fontSize += 5
					// },
					handle:function(val){
						this.fontSize += val
					}
				},
			})
		</script>
	</body>
</html>
